function Tabs(tabNames, handler)
{
	this.domElement = null;
	this.tabsHolder = null;
	this.tabsContainer = null;
	
	this.handler = handler;
	
	this.currentTabIndex = 0;
	
	this.tabs;
	
	this.init(tabNames);
}

Tabs.prototype.appendTo = function(node)
{
	var self = this;
	
	this.tabsHolder = node;
	
	var keyHandler = function(event)
	{
		self.onKeyDown(event);
	}
	node.onkeydown = keyHandler;
	
	node.appendChild(this.domElement);
	
	this.domElement.style.width = this.tabsContainer.offsetWidth + 'px';
}

Tabs.prototype.init = function(tabNames)
{
	var el = document.createElement('div');
	
//	el.href = "#";
	
	el.style.width = '10000px';
	
	el.className = 'tab_container';
	
	var inner = document.createElement('div');
	inner.style.display = 'inline-block';
	el.appendChild(inner);
	
	this.tabsContainer = inner;
	
	var self = this;
	
	var focusHandler = function()
	{
		self.onFocus(this);
	};
	
	this.tabs = new Array(tabNames.length);
	
	for(var i = 0; i < tabNames.length; i++)
	{
		var tab = document.createElement('div');
		
		tab.id = 'tab_' + tabNames[i];

		this.tabs[i] = tab;

		if(i == 0)
			tab.className = 'tab tab_active';
		else
			tab.className = 'tab';

		tab.tabIndex = i;
		
		tab.tabName = tabNames[i];
		
		tab.onclick = focusHandler;
		
		tab.appendChild(document.createTextNode(tabNames[i]));
		
		inner.appendChild(tab);
	}
	var clearer = document.createElement('div');
	
	clearer.className = 'clearer';
	
	el.appendChild(clearer);
	
	this.domElement = el;
}
Tabs.prototype.onFocus = function(tab)
{
	this.pickTab(tab.tabIndex);
}
Tabs.prototype.onKeyDown = function(event)
{
	if(event.keyCode == 37)
	{
		var nextIndex = this.currentTabIndex - 1;
		
		while(nextIndex >= 0 && this.tabs[nextIndex].style.display == 'none')
		{
			nextIndex--;
		}
		if(nextIndex >= 0)
			this.pickTab(nextIndex);
	}
	else if(event.keyCode == 39)
	{
		var nextIndex = this.currentTabIndex + 1;
		
		while(nextIndex < this.tabs.length && this.tabs[nextIndex].style.display == 'none')
		{
			nextIndex++;
		}
		
		if(nextIndex < this.tabs.length)
			this.pickTab(nextIndex);
	}
	
}
Tabs.prototype.pickTab = function(tabIndex)
{
	this.tabs[this.currentTabIndex].className = 'tab';
	
	this.currentTabIndex = tabIndex;
	
	/* move tab container */
	
	var tabLeft = this.tabs[this.currentTabIndex].offsetLeft;
	
	var parentWidth = this.tabsHolder.offsetWidth;
	
	var newLeft = (- tabLeft + parentWidth / 2 - this.tabs[this.currentTabIndex].offsetWidth / 2);
	
	/* normalize new left */
	
//	alert(this.tabsContainer.offsetWidth +"; "+ this.tabsHolder.offsetHeight);
	
	if(newLeft + this.tabsContainer.offsetWidth < this.tabsHolder.offsetWidth)
	{
		newLeft = this.tabsHolder.offsetWidth - this.tabsContainer.offsetWidth;
	}
	if(newLeft > 0)
	{
		newLeft = 0;
	}
	
	this.domElement.style.left = newLeft + 'px';
	
	this.tabs[this.currentTabIndex].className = 'tab tab_active';
	
	this.handler(this.currentTabIndex, this.tabs[this.currentTabIndex].tabName);
}